import React, { useState, useEffect } from 'react'
import { Table, Button, Modal, Tree } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'
const { confirm } = Modal

export default function RoleList() {
  const [dataSource, setDataSource] = useState([])
  const [rightList, setRightList] = useState([])
  const [currentRights, setCurrentRights] = useState([])
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [currentId, setCurrentId] = useState(0)
  //   获取角色列表
  useEffect(() => {
    axios.get('/roles').then((res) => {
      setDataSource(res.data)
    })
  }, [])

  useEffect(() => {
    axios.get('/rights?_embed=children').then((res) => {
      setRightList(res.data)
    })
  }, [])

  const showDeleteConfirm = (item) => {
    confirm({
      title: '是否确认删除?',
      icon: <ExclamationCircleOutlined />,
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }

  //   确认删除的方法
  const deleteMethod = (item) => {
    console.log(item)
    setDataSource(dataSource.filter((ele) => ele.id !== item.id))
    axios.delete(`/roles/${item.id}`)
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      },
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => showDeleteConfirm(item)}
            />
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
              onClick={() => {
                setIsModalVisible(true)
                setCurrentRights(item.rights)
                setCurrentId(item.id)
              }}
            />
          </div>
        )
      },
    },
  ]

  const handleOk = () => {
    setDataSource(
      dataSource.map((item) => {
        if (item.id === currentId) {
          return {
            ...item,
            rights: currentRights,
          }
        }
        return item
      })
    )

    axios.patch(`/roles/${currentId}`, {
      rights: currentRights,
    })

    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }
  const onCheck = (checkedKeys) => {
    setCurrentRights(checkedKeys.checked)
  }
  return (
    <div>
      <Table
        columns={columns}
        dataSource={dataSource}
        rowKey={(item) => item.id} //缺少key属性报错使用rowKey返回函数 或是字符串
      />
      <Modal
        title="权限分配"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Tree
          checkable
          treeData={rightList}
          checkedKeys={currentRights}
          onCheck={onCheck}
          checkStrictly
        />
      </Modal>
    </div>
  )
}
